<template>
  <div class="edit-note">
    <AddEditNote
      v-model="newNote"
      placeholder="note content here..."
      label="Add a new note"
      ref="addEditNoteRef"
    >
      <template #buttons>
        <button
          @click="addNote"
          :disabled="!newNote"
          class="button is-link has-background-success"
        >
          Add New Note
        </button>
      </template>
    </AddEditNote>
    <Note :note="note" v-for="note in notesStore.notes" :key="note.id" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Note from '../components/Notes/Note.vue';
import { useNotesStore } from '../stores/storeNotes';
import AddEditNote from '../components/Notes/AddEditNote.vue';
import { useWatchCharacters } from '@/use/useWatchCharacters';

const newNote = ref<string>('');
const addEditNoteRef = ref<HTMLDivElement | null>(null);

const notesStore = useNotesStore();

const addNote = () => {
  notesStore.addNote(newNote.value);
  newNote.value = '';
  addEditNoteRef?.value?.focusTextarea();
};

useWatchCharacters(newNote);
</script>
